import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  // 重定向
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: () => import("../views/home/HomeIndex"),
    // 二级路由
    children: [
      {
        path: "/home",
        redirect: "/home/movies",
      },
      {
        path: "/home/movies",
        component: () => import("../views/home/movies/MoviesView.vue"),
        children: [
          {
            path: "/home/movies",
            redirect: "/home/movies/hot",
          },
          {
            path: "/home/movies/hot",
            component: () => import("../views/home/movies/hot/HotView"),
            meta: { title: "猫眼-热映", requireAlive: true },
          },
          {
            path: "/home/movies/cinema",
            component: () => import("../views/home/movies/cinema/CinemaView"),
            meta: { title: "猫眼-影院", requireAlive: false },
          },
          {
            path: "/home/movies/wait",
            component: () => import("../views/home/movies/wait/WaitView"),
            meta: { title: "猫眼-待映", requireAlive: true },
          },
          {
            path: "/home/movies/classic",
            component: () => import("../views/home/movies/classic/ClassicView"),
            meta: { title: "猫眼-经典电影", requireAlive: true },
          },
        ],
      },
      {
        path: "/home/video",
        component: () => import("../views/home/video/VideoView.vue"),
      },
      {
        path: "/home/mini",
        component: () => import("../views/home/mini/MiniView.vue"),
      },
      {
        path: "/home/show",
        component: () => import("../views/home/show/ShowView.vue"),
        meta: { requireLogin: true },
      },
      {
        path: "/home/mine",
        component: () => import("../views/home/mine/MineView.vue"),
        // meta表示元信息，可以写任意对象，可以在路由信息里面拿到
        meta: { requireLogin: true },
      },
    ],
  },
  {
    path: "/city",
    component: () => import("../views/city/CityIndex"),
    // 路由独享守卫
    // 作用和全局的前置守卫是一样的，单个页面的前置守卫
    // beforeEnter: (to, from, next) => {
    //   if (localStorage.getItem("token")) {
    //     next();
    //   } else {
    //     next("/login");
    //   }
    // },
  },
  {
    path: "/login",
    component: () => import("../views/login/LoginView"),
  },
  {
    path: "/detail/:id",
    props: true,
    component: () => import("../views/detail/DetailIndex"),
  },
  // 404
  {
    path: "*",
    component: () => import("../views/not/NotFound"),
  },
];

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // 只有点击前进或者后退的时候有效果
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  },
});

// 全局前置守卫
// 只要路由发生改变就会执行
router.beforeEach((to, from, next) => {
  // to和from表示的是去和来的页面的路由信息
  // console.log(to);
  // console.log(from);

  // 路由鉴权
  if (to.meta.requireLogin) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }
  } else {
    next();
  }

  // 保安放行
  // next();
  // next(false);
  // next("/login");
});

// 全局解析守卫，语法和用法与全局前置守卫完全相同，唯一不同的是执行时机
// router.beforeResolve((to, from, next) => {});

// 全局后置钩子
// 不能做和next相关的事情
router.afterEach((to) => {
  document.title = to.meta.title || "猫眼电影 - 娱乐看猫眼";
});

// 解决编程式导航重复点击时的报错
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

export default router;
